<!--
 * @Author: zixin 
 * @Date: 2025-04-16 15:55:23
 * @LastEditors: zixin 
 * @LastEditTime: 2025-04-16 15:55:28
 * @FilePath: \shuttle-bus-app\pages\components\BottomNav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="bottom-nav">
      <div 
        class="nav-item" 
        :class="{active: active === 'home'}"
        @click="goTo('/')"
      >
        <div class="icon">🚌</div>
        <div class="text">首页 HOME</div>
      </div>
      
      <div 
        class="nav-item" 
        :class="{active: active === 'shifts'}"
        @click="goTo('/shifts')"
      >
        <div class="icon">⏱️</div>
        <div class="text">班次 SHIFTS</div>
      </div>
      
      <div 
        class="nav-item" 
        :class="{active: active === 'warn'}"
        @click="goTo('/warn')"
      >
        <div class="icon">🔔</div>
        <div class="text">提醒 WARN</div>
      </div>
      
      <div 
        class="nav-item" 
        :class="{active: active === 'me'}"
        @click="goTo('/me')"
      >
        <div class="icon">👤</div>
        <div class="text">我的 ME</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      active: String
    },
    methods: {
      goTo(path) {
        this.$router.push(path)
      }
    }
  }
  </script>
  
  <style scoped>
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    display: flex;
    border-top: 1px solid #eee;
  }
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
  }
  
  .nav-item.active {
    color: #1E90FF;
  }
  
  .icon {
    font-size: 20px;
    margin-bottom: 3px;
  }
  
  .text {
    font-size: 12px;
  }
  </style>